<template>
  <div class="app-container-box">
    <div class="box-tag" />
    <span class="title-text">自定义菜单</span>
    <span class="top-tips-text">注*编辑菜单名称及内容，菜单4项（交流互动、相关视频为默认项不可更改），其他项如若不进行填写实际观看界面菜单栏将不会展示</span>
    <div class="warp-line-top" />
    <div class="warp-line-middle" />

    <div class="el-form-box">
      <el-form ref="form" :model="form" label-width="auto">
        <el-form-item label="菜单二名称：">
          <el-input
            v-model="displayLiveData.Menu2Name"
            style="width: 170px; margin-right: 10px;"
            :maxlength="displayLiveData.menu2InputMaxLimit"
            @input="onInput2Changed"
          />
          <span>{{ displayLiveData.menu2TotalInput }}/{{ displayLiveData.menu2InputMaxLimit }}</span>
        </el-form-item>

        <el-form-item label="菜单二显示图片：">
          <div class="el-input-box">
            <el-upload
              class="avatar-uploader"
              :action="fileUploadAddr"
              :show-file-list="false"
              :on-success="handleLogoImageSuccess"
              :before-upload="beforeAvatarUpload"
              :headers="fileUploadHeaders"
              :disabled="menu2UploadDisabled"
            >
              <img v-if="displayLiveData.LiveDescImage" :src="displayLiveData.LiveDescImage" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </div>
        </el-form-item>

        <el-form-item label="菜单三名称：">
          <el-input
            v-model="displayLiveData.Menu3Name"
            style="width: 170px; margin-right: 10px;"
            :maxlength="displayLiveData.menu3InputMaxLimit"
            @input="onInput3Changed"
          />
          <span>{{ displayLiveData.menu3TotalInput }}/{{ displayLiveData.menu3InputMaxLimit }}</span>
        </el-form-item>

        <el-form-item label="菜单三URL链接：">
          <el-input v-model="displayLiveData.PhotoLiveURL" style="width: 70%" />
        </el-form-item>

      </el-form>
    </div>

    <el-button class="submit-change" type="primary" :loading="submitLoading" @click="updateLiveReq">提交</el-button>

    <span class="over-view-text">预览：</span>
    <div class="overview-image">
      <el-image :src="require('@/assets/custom_menu_overview.png')" class="image-style">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { updateLive } from '@/api/lives'
export default {
  name: 'SubjectSetting',
  data() {
    return {
      menu2UploadDisabled: false,
      submitLoading: false,
      fileUploadAddr: '',
      fileUploadHeaders: {
        Authorization: ''
      },
      // 展示数据
      displayLiveData: {
        Menu2Name: '',
        Menu3Name: '',
        PhotoLiveURL: '',
        menu2InputMaxLimit: 4,
        menu2TotalInput: 0,
        menu3InputMaxLimit: 4,
        menu3TotalInput: 0,
        // 病例报告（会议介绍图片）
        LiveDescImage: '',
        // 病例报告预览图片
        CaseReportOverviewImage: []
      },
      // 更新数据
      updateLiveData: {
        Menu2Name: '',
        Menu3Name: '',
        PhotoLiveURL: '',
        // 病例报告（会议介绍图片）
        LiveDescImage: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'choicedLive',
      'token'
    ])
  },
  watch: {
    'choicedLive'(n, o) {
      this.initOrChanged(n)
    },
    'token'(n, o) {
      this.fileUploadHeaders.Authorization = n
    }
  },
  mounted() {
    // token
    this.fileUploadHeaders.Authorization = this.token
    // 上传文件地址
    this.fileUploadAddr = process.env.VUE_APP_BASE_API + '/api/v1/files'
    this.initOrChanged(this.choicedLive)
  },
  methods: {
    initOrChanged(d) {
      if (d.id) {
        this.displayLiveData.CaseReportOverviewImage = [d.LiveDescImage]
        this.displayLiveData.LiveDescImage = d.LiveDescImage
        this.displayLiveData.Menu2Name = d.Menu2Name || ''
        this.displayLiveData.Menu3Name = d.Menu3Name || ''
        this.displayLiveData.PhotoLiveURL = d.PhotoLiveURL
        this.displayLiveData.menu3TotalInput = d.Menu3Name.length
        this.displayLiveData.menu2TotalInput = d.Menu2Name.length
      }
    },
    // input 2改变时
    onInput2Changed(ev) {
      this.displayLiveData.menu2TotalInput = ev.length
      if (ev.length > this.displayLiveData.menu2InputMaxLimit) {
        this.$message.error(`不能超过${this.displayLiveData.menu2InputMaxLimit}个字符`)
      }
    },
    // input 3改变时
    onInput3Changed(ev) {
      this.displayLiveData.menu3TotalInput = ev.length
      if (ev.length > this.displayLiveData.menu3InputMaxLimit) {
        this.$message.error(`不能超过${this.displayLiveData.menu3InputMaxLimit}个字符`)
      }
    },
    // 上传logo图片成功回调
    handleLogoImageSuccess(res, file) {
      if (res.code === 200) {
        this.updateLiveData.LiveDescImage = res.data[0].AccessAddress
        this.displayLiveData.LiveDescImage = res.data[0].AccessAddress
      }
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 5

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!')
      // }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      // return isJPG && isLt2M
      return isLt2M
    },
    // 更新直播请求
    updateLiveReq() {
      this.submitLoading = true
      this.updateLiveData.Menu2Name = this.displayLiveData.Menu2Name
      this.updateLiveData.Menu3Name = this.displayLiveData.Menu3Name
      this.updateLiveData.PhotoLiveURL = this.displayLiveData.PhotoLiveURL

      updateLive(this.updateLiveData, this.choicedLive.id).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.$store.dispatch('lives/setchoiceLive', Object.assign(this.choicedLive, this.updateLiveData))
        }
      })
      this.submitLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container-box {
  height: 1147px;

}
.box-tag {
  width: 4px;
  height: 28px;
  background: #2E9BEA;
  border-radius: 2px;
  position: relative;
  top: 32px;
}
.title-text{
  width: 171px;
  height: 23px;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4A5462;
  top: 31px;
  left: 54px;
  position: absolute;
}
.warp-line-top {
  width: 1627px;
  height: 4px;
  background: #EDF5FB;
  top: 136px;
  position: absolute;
}
.warp-line-middle {
  width: 4px;
  height: 852px;
  background: #EDF5FB;
  opacity: 1;
  position: absolute;
  top: 136px;
  left: 880px;
}
.el-input-box {
  margin: 0px;
  ::v-deep {
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      width: 96px;
      height: 96px;
      }
  .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
  .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 96px;
      height: 96px;
      // line-height: 178px;
      text-align: center;
      }
  .avatar {
      width: 96px;
      height: 96px;
      display: block;
    }
  .el-icon-plus {
    align-items: center;
    display: flex;
    justify-content: center;
    }
}
  }
span {
    width: 86px;
    height: 20px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #6D7A8E;
}

.submit-change {
  width: 159px;
  height: 50px;
  background: #2E9BEA;
  border-radius: 10px;
  position: absolute;
  top: 1051px;
  left: 659px;
  ::v-deep {
    span {
      width: 46px;
      height: 20px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
    }
  }
}
.over-view-text {
  width: auto;
  height: auto;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #6D7A8E;
  position: absolute;
  top: 186px;
  left: 916px;
}
.overview-image {
  position: absolute;
  width: 442px;
  height: 660px;
  top: 232px;
  left: 966px;
  // border: 1px dashed #d9d9d9;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-tips-text {
  width: auto;
  position: absolute;
  top: 86px;
  left: 58px;
  font-size: 18px;
  font-family: PingFangSC-Regular;
  line-height: 35px;
  color: #6DA3CB;
  opacity: 1;
}
.image-style {
  width: 442px;
  height: 660px;
}
.el-form-box {
  width: 50%;
  position: absolute;
  top: 170px;
  left: 70px;
 ::v-deep .el-form-item__label{
    font-weight: 400;
    font-size: 16px;
    display: #6D7A8E;
  }
}

</style>
